<template>
    <div class="common-containar draft" ref="element">
        <div class="pageOther-container">
			<span class="first">理赔服务 / 统计</span>
			<div class="content">
				<div ref="topHeight">
					<el-row>
						<!-- 查询条件 开始 -->
						<el-form :inline="true" class="demo-form-inline addData searchForm">
						
							<el-form-item label="店铺名称">
								<el-input v-model="form.store_name" placeholder="输入店铺名称" @keyup.enter.native="search"></el-input>
							</el-form-item>
							<el-form-item label="开始时间">
								<el-date-picker style="margin-left: -2px;" value-format="yyyy-MM-dd" v-model="form.start_time" type="date" placeholder="添加时间">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间">
								<el-date-picker style="margin-left: -2px;" value-format="yyyy-MM-dd" v-model="form.end_time" type="date" placeholder="截止时间">
								</el-date-picker>
							</el-form-item>
							<el-form-item class="btnHast ">
								<button type="button" class="btnSearch" @click="search">搜索</button>
							</el-form-item>
						</el-form>
						<!--查询条件 结束-->
					</el-row>
				</div>
				<el-table :height="height" v-loading="loading"
				class="tableClass" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				>
					<el-table-column prop="store_name" label="店铺名称"></el-table-column>
					<el-table-column prop="cx_count" label="畅行无忧个数"></el-table-column>
					<el-table-column prop="yb_count" label="延保个数"></el-table-column>
                    <el-table-column prop="start_time" label="开始时间"></el-table-column>
                    <el-table-column prop="end_time" label="结束时间"></el-table-column>
				</el-table>
			</div>
			<div class="pagination-container">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNum"
					:page-sizes="[10,20,50]" :page-size="page.pageSize" layout="total, sizes,prev, pager, next,jumper" :total="total">
				</el-pagination>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				height: 'calc(100% - 60px)',
                form: {
                    store_name: '',
                    start_time: '',
                    end_time: ''
                },
                loading: false,
                tableData: [],
                total: 0,
				currentPage: 1, //当前页数默认为1
				page: {
					page: 1,
					per: 10
				},
            }
		},
		mounted() {
			//this.getList();
			if(localStorage.getItem("token")) { this.getList(); };
		},
        methods: {
            search() {
				this.loading = true
				this.$http.get(this.GLOBAL.REQUESTURL + "/order/group_sales/?p="+this.page.page+"&page_size="+this.page.per, {
					"store_name": this.form.store_name,
					"start_time": this.form.start_time,
					"end_time": this.form.end_time,
				}).then(res => {
					this.loading = false
					this.tableData = res.results;
					this.total=res.count;
				})
			},
            getList() {
				this.loading = true;
				this.$http.get(this.GLOBAL.REQUESTURL + "/order/group_sales/?p=" +
					this.page.page +
					"&page_size=" +
					this.page.per,this.form
				).then(res => {
					this.loading = false;
					this.tableData = res.results;
					this.total = res.count ? res.count : 0
				}).catch(err => {
					this.loading = false;
					this.$message({
						type:'error',
						message: '请联系管理员'
					})
				})
			},
            /*每页条数变化*/
			handleSizeChange(val) {
				this.page.per = val;
				this.getList();
			},
			/*当前页码改变*/
			handleCurrentChange(val) {
				this.page.page = val;
				this.getList();
			},
        }
    }
</script>

<style scoped>

</style>